<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/animate.css" />
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0px;
			padding: 0px;
		}
		
		body,
		html {
			width: 100%;
			height: 100%;
		}
		
		#out {
			border: 3px solid black;
		}
		
		#aa {
			width: 200px;
			height: 200px;
			background-color: #FF0000;
			display: block;
		}
		
		#bb {
			width: 200px;
			height: 200px;
			background-color: #000;
			display: none;
		}
		
		#cc {
			width: 200px;
			height: 200px;
			background-color: yellow;
			display: none;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<body>
		<div id="out">
			<div id="aa"></div>
			<div id="bb"></div>
			<div id="cc"></div>
		</div>
		<script src="js/hammer.min.2.0.8.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).on('touchmove', function(e) {
				e.preventDefault();
			});
			var i = 1;
			//			$('#out').click(function(){
			//				switch(i){
			//					case 1:
			//					console.log('first');
			//					break;
			//					case 2:
			//					console.log('scrend');
			//					break;
			//					case 3:
			//					console.log('third');
			//					break;
			//				}
			//				i++;
			//			})
			var hammertime = new Hammer(document.getElementById('out'));
			hammertime.on('panup', function(ev) {
				console.log(ev);
				if(ev.isFinal==true) {
					switch(i) {
						case 1:
							console.log(ev);
							console.log('first');
							$('#aa').hide();
							$('#bb').show();
							break;
						case 2:
							console.log(ev);
							console.log('scrend');
							$('#bb').hide()
							$('#cc').show()
							break;
						case 3:
							console.log(ev);
							console.log('third');
							$('#cc').hide()
							$('#aa').show()
							break;
					}
					i++;
				}

			});
		</script>
	</body>

</html>